<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="container">
        <!--标题部分-->
        <div>
            <h2>系统公告客户端设计及实现(Bootstrap+Vue)</h2>
        </div>

        <div v-show="listNoticeDiv">
            <!--查询-->
            <div>
                <form id="queryForm">
                    <input type="text" name="title" id="titleId" placeholder="标题">
                    <input type="button" value="查询" @click="doQueryNotices">
                </form>
            </div>

            <button @click="doShowOrHide">添加</button>
            <!--内容部分-->

                <div><!--内容列表区-->
                    <table class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>标题</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--
                            有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
                            https://www.zhihu.com/question/61064119
                        -->
                        <tr v-for="n,i in notices" :key="i">
                            <td>{{i+1}}</td>
                            <td>{{n.title}}</td>
                            <td>{{n.type}}</td>
                            <td>{{n.status}}</td>
                            <td>{{n.createdTime}}</td>
                            <td>
                                <button @click="doUpdateById(n.id)">update</button>
                                <button @click="doDeleteById(n.id)">delete</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!--分页-->
                <div class="pagination">
                    <button class="pre" @click="doJumpToPage">上一页</button>
                    <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
                    <button class="next" @click="doJumpToPage">下一页</button>
                    <form style="display: inline">
                        <!--可以使用 v-model 实现双向绑定使pageCurrent-->
                        <input type="text" name="pageCurrent" id="pageNumId">
                        <input type="button" value="跳转" class="jump" @click="doJumpToPage">
                    </form>
                </div>
        </div>
            <!--添加页-->
            <div v-show="editNoticeDiv" style="display: none">
                <form id="noticeEditForm">
                    <input type="hidden" id="id" v-model="id">
                    <div class="form-group">
                        <label for="typeId">类型:</label>
                        <select class="form-control" v-model="type" id="typeId">
                            <option value="1">通知</option>
                            <option value="2">公告</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tId">标题:</label>
                        <input type="text" v-model="title" class="form-control" id="tId"
                               placeholder="title">
                    </div>
                    <div class="form-group">
                        <label for="contentId">内容:</label>
                        <textarea class="form-control" v-model="content" rows="3"
                                  id="contentId">
                        </textarea>
                    </div>
                    <div class="form-group">
                        <label>状态:</label>
                        <label class="radio-inline">
                            <input type="radio" v-model="status" name="status" value="0"
                                   checked> 正常
                        </label>
                        <label class="radio-inline">
                            <input type="radio" v-model="status" name="status"
                                   value="1"> 关闭
                        </label>
                    </div>
                    <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">Submit</button>
                    <button type="button" class="btn btn-default cancel" @click="doCancel">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#app',//定义监控点，vue底层会基于此监控点在内存中构建dom数
        data: {//此对象中定义页面上要操作的数据
            notices: [],
            id:"",
            title:"",
            content:"",
            type:1,
            status:0,
            pageCurrent: 1,
            pageCount: 0,
            listNoticeDiv:true,
            editNoticeDiv:false
        },
        methods: { //此位置定义所有业务事件处理函数
            doShowOrHide(){
                this.listNoticeDiv=false;
                this.editNoticeDiv=true;
            },
            doCancel(){
                this.listNoticeDiv=true,
                    this.editNoticeDiv=false
            },

            //更新
            doUpdateById(id){
              let url=`http://localhost/notice/fidnById/${id}`;
              axios.get(url).then((response)=>{
                  let result=response.data;//jsonResult
                  if(result.state==1){
                    //修改vue对象中data (model)中的属性的值,使用了v-model实现双向绑定
                      this.id=result.data.id;
                      this.title=result.data.title;
                      this.content=result.data.content;
                      this.type=result.data.type;
                      this.status=result.data.status;
                      this.doShowOrHide();
                  }else{
                      alert(result.message);
                  }

              })
            },

            //重置表单内容,防止再次点添加时有上次的数据
            resetForm(){
                    this.id="",
                    this.title="",
                    this.content="",
                    this.type=1,
                    this.status=0
            },

            //新增或修改
            /* post提交不能这么写
                  axios.post(url,{
                    params: {
                        "title":this.title,
                        "content":this.content,
                        "type":this.type,
                        "status":this.status
                    }
                })
            */
            doSaveOrUpdate(){
                debugger
                let url1 ="http://localhost/notice/saveNotice";
                let url2 ="http://localhost/notice/updateNotice";

                let params={
                    "title":this.title,
                    "content":this.content,
                    "type":this.type,
                    "status":this.status
                };
                axios({
                    method:this.id?"put":"post",
                    url:this.id?url2:url1,
                    data:params
                }).then((response)=>{
                    if (response.data.state==1){
                        alert(response.data.message);
                        this.doGetNotice();
                        this.resetForm();
                        this.doCancel();
                    }else{
                        alert(response.data.message);
                    }
                })
            },

            //基于id删除
            doDeleteById(id) {
                let url = `http://localhost/notice/deleteNotice/${id}`
                axios.delete(url).then((response) => {
                    if (response.data.state == 1) {
                        alert(response.data.message);
                        //假如删除的数据是最后一页的最后一条数据则返回到上一页
                        //querySelector 每次只查寻一个元素 querySelectorAll 查询所有元素
                        // document.querySelector("table>tbody").children.length;
                        let row = document.querySelectorAll("table>tbody>tr").length;
                        if (this.pageCurrent > 1 && this.pageCurrent == this.pageCount && row == 1) {
                            this.pageCurrent--;
                        }
                        this.doGetNotice();
                    } else {
                        alert(response.data.message);
                    }
                })

            },
            //输入框模糊查询
            doQueryNotices() {
                this.pageCurrent = 1;
                this.doGetNotice();
            },
            //分页
            doJumpToPage(event) {//event对象表示事件，基于此对象可以获取被点击的对象
                //1、获取被点击的对象的class属性值
                debugger
                let cls = event.target.getAttribute("class");
                console.log("cls," + cls)

                //2、基于属性值修改页码值
                if (cls == "pre" && this.pageCurrent > 1) {
                    this.pageCurrent--;
                } else if (cls == "next" && this.pageCurrent < this.pageCount) {
                    this.pageCurrent++;
                } else if (cls == "jump") {
                    //获取表单输入框中的值

                    let pageCurrent = document.getElementById("pageNumId").value;
                    if (pageCurrent < 1 || pageCurrent > this.pageCount) {
                        alert("页码值不正确");
                        //清空输入框的值
                        pageCurrent = "";
                        return;
                    }
                    this.pageCurrent = pageCurrent;
                    pageCurrent = "";
                } else {
                    return;
                }
                //3、重新查询
                this.doGetNotice();
            },
            //查询
            doGetNotice() {
                //获取输入框中的title值 querySelector和getElementById类似
                let title = document.querySelector("#titleId").value;
                // let url = `http://localhost/notice/findNotice?pageCurrent=${this.pageCurrent}&title=${title}`
                let url = "http://localhost/notice/findNotice/";
                //不使用字符串拼接传递参数
                axios.get(url, {
                    params: {
                        title: title,
                        pageCurrent: this.pageCurrent
                    }
                })
                    .then(function (response) {
                        //把拿到的数据添加到notices数组，然后底层在把数据中的数据遍历出
                        this.v.notices = response.data.data.list;
                        //设置分页初始数据
                        this.v.pageCurrent = response.data.data.pageNum;
                        this.v.pageCount = response.data.data.pages;

                    })
            }


        },
        mounted() {//vue中的一个生命周期函数，此函数在页面加载完成以后执行
            this.doGetNotice();
        }
    });
</script>
</body>
</html>